<template>
  <view class="reports-container">
    <!-- 筛选栏 -->
    <view class="filter-bar">
      <view class="search-box">
        <text class="iconfont icon-search"></text>
        <input type="text" placeholder="搜索检查项目" v-model="searchKey" />
      </view>
      <view class="type-filter">
        <text 
          v-for="(type, index) in reportTypes"
          :key="index"
          :class="{ active: currentType === type.value }"
          @tap="selectType(type.value)"
        >{{ type.label }}</text>
      </view>
    </view>
    
    <!-- 报告列表 -->
    <scroll-view 
      scroll-y 
      class="report-list"
      refresher-enabled
      :refresher-triggered="refreshing"
      @refresherrefresh="onRefresh"
      @scrolltolower="onLoadMore"
    >
      <view 
        class="report-item card"
        v-for="(report, index) in filteredReports"
        :key="index"
        @tap="viewReport(report)"
      >
        <view class="header">
          <view class="exam-info">
            <text class="name">{{ report.name }}</text>
            <text class="time">{{ report.time }}</text>
          </view>
          <text class="status" :class="report.status">{{ report.statusText }}</text>
        </view>
        
        <view class="hospital-info">
          <image :src="report.hospitalLogo" mode="aspectFit" class="logo" />
          <view class="info">
            <text class="name">{{ report.hospitalName }}</text>
            <text class="department">{{ report.departmentName }}</text>
          </view>
        </view>
        
        <view class="result-preview" v-if="report.status === 'completed'">
          <text class="label">检查结果</text>
          <text class="value">{{ report.result }}</text>
        </view>
        
        <view class="footer">
          <view class="doctor-info">
            <text class="label">检查医生：</text>
            <text class="value">{{ report.doctorName }}</text>
          </view>
          <view class="action-btn" v-if="report.status === 'completed'">
            查看详情
            <text class="iconfont icon-arrow-right"></text>
          </view>
        </view>
      </view>
      
      <!-- 加载更多 -->
      <view class="load-more" v-if="hasMore">
        <text>加载中...</text>
      </view>
      
      <!-- 没有更多数据 -->
      <view class="no-more" v-if="!hasMore && filteredReports.length > 0">
        <text>没有更多报告了</text>
      </view>
      
      <!-- 空状态 -->
      <view class="empty-state" v-if="filteredReports.length === 0">
        <image src="/static/empty/no-reports.png" mode="aspectFit" />
        <text>暂无检查报告</text>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'

// 搜索关键词
const searchKey = ref('')
const currentType = ref('all')

// 报告类型
const reportTypes = [
  { label: '全部', value: 'all' },
  { label: '检验', value: 'lab' },
  { label: '检查', value: 'exam' },
  { label: '影像', value: 'image' }
]

// 分页相关
const pageSize = 10
const currentPage = ref(1)
const hasMore = ref(true)
const refreshing = ref(false)

// 报告列表数据
const reports = ref([
  {
    id: 1,
    name: '心电图检查',
    time: '2024-03-25 10:00',
    status: 'completed',
    statusText: '已完成',
    hospitalName: '澳门镜湖医院',
    hospitalLogo: '/static/hospital/kiang-wu.jpg',
    departmentName: '心内科',
    result: '窦性心律，心率75次/分，电轴正常...',
    doctorName: '张医生',
    type: 'exam'
  },
  {
    id: 2,
    name: '血常规检查',
    time: '2024-03-25 10:30',
    status: 'processing',
    statusText: '检验中',
    hospitalName: '澳门镜湖医院',
    hospitalLogo: '/static/hospital/kiang-wu.jpg',
    departmentName: '检验科',
    doctorName: '李医生',
    type: 'lab'
  },
  {
    id: 3,
    name: '胸部CT',
    time: '2024-03-25 11:00',
    status: 'completed',
    statusText: '已完成',
    hospitalName: '澳门镜湖医院',
    hospitalLogo: '/static/hospital/kiang-wu.jpg',
    departmentName: '放射科',
    result: '未见明显异常',
    doctorName: '王医生',
    type: 'image'
  }
])

// 根据筛选条件过滤报告
const filteredReports = computed(() => {
  let result = reports.value

  // 搜索过滤
  if (searchKey.value) {
    const key = searchKey.value.toLowerCase()
    result = result.filter(report => 
      report.name.toLowerCase().includes(key) ||
      report.hospitalName.toLowerCase().includes(key) ||
      report.departmentName.toLowerCase().includes(key)
    )
  }

  // 类型过滤
  if (currentType.value !== 'all') {
    result = result.filter(report => report.type === currentType.value)
  }

  // 分页处理
  const start = 0
  const end = currentPage.value * pageSize
  result = result.slice(start, end)

  return result
})

// 选择类型
const selectType = (type) => {
  currentType.value = type
  resetList()
}

// 重置列表
const resetList = () => {
  currentPage.value = 1
  hasMore.value = true
  refreshing.value = false
}

// 下拉刷新
const onRefresh = () => {
  refreshing.value = true
  resetList()
  setTimeout(() => {
    refreshing.value = false
  }, 1000)
}

// 加载更多
const onLoadMore = () => {
  if (!hasMore.value) return
  currentPage.value++
  
  // 检查是否还有更多数据
  const totalCount = reports.value.length
  const currentCount = currentPage.value * pageSize
  if (currentCount >= totalCount) {
    hasMore.value = false
  }
}

// 查看报告详情
const viewReport = (report) => {
  if (report.status === 'completed') {
    uni.navigateTo({
      url: `/pages/records/report?id=${report.id}`
    })
  }
}
</script>

<style lang="scss">
.reports-container {
  min-height: 100vh;
  background: $bg-color;
  
  .filter-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    padding: 20rpx;
    box-shadow: $shadow-sm;
    
    .search-box {
      display: flex;
      align-items: center;
      height: 72rpx;
      background: $bg-color;
      border-radius: $radius-xl;
      padding: 0 30rpx;
      margin-bottom: 20rpx;
      
      .iconfont {
        font-size: 32rpx;
        color: $text-secondary;
        margin-right: 16rpx;
      }
      
      input {
        flex: 1;
        font-size: 28rpx;
        color: $text-primary;
      }
    }
    
    .type-filter {
      display: flex;
      justify-content: space-around;
      
      text {
        font-size: 28rpx;
        color: $text-regular;
        padding: 12rpx 30rpx;
        border-radius: $radius-xl;
        transition: all 0.3s;
        
        &.active {
          color: #fff;
          background: $primary-gradient;
        }
        
        &:active {
          opacity: 0.8;
        }
      }
    }
  }
  
  .report-list {
    height: calc(100vh - 200rpx);
    padding: 20rpx;
    
    .report-item {
      margin-bottom: 20rpx;
      
      .header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 20rpx;
        
        .exam-info {
          .name {
            font-size: 32rpx;
            color: $text-primary;
            font-weight: bold;
            margin-bottom: 8rpx;
            display: block;
          }
          
          .time {
            font-size: 26rpx;
            color: $text-secondary;
          }
        }
        
        .status {
          font-size: 24rpx;
          padding: 4rpx 12rpx;
          border-radius: $radius-sm;
          
          &.completed {
            color: $success;
            background: rgba($success, 0.1);
          }
          
          &.processing {
            color: $primary-color;
            background: $primary-light;
          }
        }
      }
      
      .hospital-info {
        display: flex;
        align-items: center;
        padding-bottom: 20rpx;
        border-bottom: 1rpx solid #eee;
        
        .logo {
          width: 40rpx;
          height: 40rpx;
          border-radius: $radius-sm;
          margin-right: 12rpx;
        }
        
        .info {
          .name {
            font-size: 28rpx;
            color: $text-primary;
            margin-bottom: 4rpx;
            display: block;
          }
          
          .department {
            font-size: 24rpx;
            color: $text-secondary;
          }
        }
      }
      
      .result-preview {
        padding: 20rpx 0;
        border-bottom: 1rpx solid #eee;
        
        .label {
          font-size: 26rpx;
          color: $text-regular;
          margin-bottom: 8rpx;
          display: block;
        }
        
        .value {
          font-size: 28rpx;
          color: $text-primary;
          line-height: 1.6;
        }
      }
      
      .footer {
        padding-top: 20rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .doctor-info {
          .label {
            font-size: 26rpx;
            color: $text-regular;
          }
          
          .value {
            font-size: 26rpx;
            color: $text-primary;
          }
        }
        
        .action-btn {
          display: flex;
          align-items: center;
          font-size: 26rpx;
          color: $primary-color;
          
          .iconfont {
            font-size: 24rpx;
            margin-left: 8rpx;
          }
        }
      }
      
      &:active {
        transform: scale(0.99);
      }
    }
    
    .load-more,
    .no-more {
      text-align: center;
      padding: 30rpx 0;
      
      text {
        font-size: 26rpx;
        color: $text-secondary;
      }
    }
    
    .empty-state {
      padding: 120rpx 0;
      text-align: center;
      
      image {
        width: 240rpx;
        height: 240rpx;
        margin-bottom: 30rpx;
      }
      
      text {
        font-size: 28rpx;
        color: $text-secondary;
      }
    }
  }
}
</style> 